import React, { useState, useEffect } from 'react';
import { Upload, MessageSquare, Settings } from 'lucide-react';
import DocumentUpload from './components/DocumentUpload';
import ChatInterface from './components/ChatInterface';
import { API_CONFIG, getApiUrl } from './config/api';
import axios from 'axios';

type Tab = 'upload' | 'chat';

interface ModelInfo {
  id: string;
  object: string;
  created?: number;
  owned_by?: string;
}

function App() {
  const [activeTab, setActiveTab] = useState<Tab>('upload');
  const [selectedModel, setSelectedModel] = useState('deepseek-r1:1.5b');
  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
  const [modelsLoading, setModelsLoading] = useState(false);

  useEffect(() => {
    fetchModels();
  }, []);

  const fetchModels = async () => {
    setModelsLoading(true);
    try {
      const response = await axios.get(getApiUrl(API_CONFIG.ENDPOINTS.MODELS), {
        timeout: 10000,
      });
      
      if (response.data?.data) {
        setAvailableModels(response.data.data);
        if (response.data.data.length > 0) {
          setSelectedModel(response.data.data[0].id);
        }
      }
    } catch (error) {
      console.warn('获取模型列表失败:', error);
      // 使用默认模型
      setAvailableModels([{ id: 'deepseek-r1:1.5b', object: 'model' }]);
    } finally {
      setModelsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 头部导航 */}
      <header className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-16">
            <div className="flex items-center space-x-4">
              <h1 className="text-xl font-bold text-gray-900">Spring AI RAG 演示</h1>
              
              {/* 标签页导航 */}
              <nav className="flex space-x-4">
                <button
                  onClick={() => setActiveTab('upload')}
                  className={`
                    flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors
                    ${activeTab === 'upload'
                      ? 'bg-blue-100 text-blue-700 border border-blue-300'
                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                    }
                  `}
                >
                  <Upload className="w-4 h-4" />
                  <span>文档上传</span>
                </button>
                <button
                  onClick={() => setActiveTab('chat')}
                  className={`
                    flex items-center space-x-2 px-3 py-2 rounded-md text-sm font-medium transition-colors
                    ${activeTab === 'chat'
                      ? 'bg-blue-100 text-blue-700 border border-blue-300'
                      : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
                    }
                  `}
                >
                  <MessageSquare className="w-4 h-4" />
                  <span>AI 对话</span>
                </button>
              </nav>
            </div>

            {/* 模型选择器 */}
            <div className="flex items-center space-x-3">
              <Settings className="w-4 h-4 text-gray-500" />
              <select
                value={selectedModel}
                onChange={(e) => setSelectedModel(e.target.value)}
                className="block w-48 px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
                disabled={modelsLoading}
              >
                {modelsLoading ? (
                  <option>加载中...</option>
                ) : availableModels.length > 0 ? (
                  availableModels.map((model) => (
                    <option key={model.id} value={model.id}>
                      {model.id}
                    </option>
                  ))
                ) : (
                  <option value="deepseek-r1:1.5b">deepseek-r1:1.5b (默认)</option>
                )}
              </select>
            </div>
          </div>
        </div>
      </header>

      {/* 主内容区域 */}
      <main className="flex-1">
        {activeTab === 'upload' ? (
          <div className="py-8">
            <DocumentUpload />
          </div>
        ) : (
          <div className="h-[calc(100vh-4rem)]">
            <ChatInterface selectedModel={selectedModel} />
          </div>
        )}
      </main>
    </div>
  );
}

export default App;
